<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-date v-model="dateModel1" width="200px"></l-date>
      <template v-slot:code>
        {{example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        格式化的日期
      </template>
      <l-date v-model="dateModel2" :format="format2" width="200px"></l-date>
      <template v-slot:code>
        {{example2}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        不显示时间输入框
      </template>
      <l-date v-model="dateModel3" :format="format2" width="200px" :with-time="false"></l-date>
      <template v-slot:code>
        {{example3}}
      </template>
    </example>
  </div>
</template>

<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import DateExample from './Date-Example';

export default {
  name: 'Date',
  components: {
    Catalog,
    Example
  },
  data () {
    return {
      dateModel1: '',
      dateModel2: '2019-09-02 15:30:20',
      format2: 'MM-dd HH:mm',
      format3: 'yyyy-MM-dd',
      dateModel3: new Date(),
      example1: DateExample.example1,
      example2: DateExample.example2,
      example3: DateExample.example3
    };
  }
};
</script>
